<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name=viewport
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
		<meta name="referrer" content="no-referrer">
		<title>本地影视</title>
		<style>
			@import url("button.css");
		</style>
		<style type="text/css">
			html,
			body {
				background-color: black;
			}
		</style>

	</head>
	<body>
		<div style=" width: 100%;display: flex; justify-content: center; align-items: center;">

			<div style=" width: 80%;">

				<video id="video" controls width="100%"></video>
				
			</div>
		</div>

		<script src="hls.js"></script>

		<div style="display: flex; justify-content: center; align-items: center;">
			<input style="width: 70%;" type="text" id="urlInput" placeholder="请输入Url">
			<button onclick="OnPlay()">播放</button>
		</div>

		<div id="m3u8ButtonContainer"></div>
		<div id="mp4ButtonContainer"></div>

		<script>
			const video = document.getElementById('video');
			
			
			function OnPlayUrl(url) {

				// console.log("OnPlayUrl", url);
				//var video = document.getElementById('video');
				video.removeAttribute('src');
				// 先移除已有的source元素（如果存在）
				while (video.firstChild) {
					video.removeChild(video.firstChild);
				}
				if (url.endsWith(".mp4")) {


					var source = document.createElement('source');
					source.src = url;
					source.type = 'audio/mp4';
					video.appendChild(source);
					video.load();
					video.play();
				} else if (url.endsWith(".m3u8")) {


					var hls = new Hls();
					hls.loadSource(url);
					hls.attachMedia(video);
					hls.on(Hls.Events.MANIFEST_PARSED, function() {
						video.play();
					});
				} else if (url.endsWith(".mkv")) {


					var source = document.createElement('source');
					source.src = url;
					source.type = 'audio/mp4';
					video.appendChild(source);
					video.load();

					video.play();
				}

			}

			function OnPlayM3U8Name(name) {
				const playPathName = "/video/m3u8/"; //播放文件夹
				var url = "http://" + window.location.hostname + ":" + window.location.port + playPathName + name +
					"/index.m3u8/index.m3u8";

				//console.log(url);
				OnPlayUrl(url);

			}

			function OnPlayMP4Name(name) {
				const playPathName = "/video/mp4/"; //播放文件夹
				var url = "http://" + window.location.hostname + ":" + window.location.port + playPathName + name;

				//console.log(url);

				OnPlayUrl(url);
			}

			const m3u8ButtonContainer = document.getElementById('m3u8ButtonContainer');
			const m3u8NamePath = "./video/m3u8/name.txt"; //视频文件名称文件

			fetch(m3u8NamePath)
				.then(response => response.text())
				.then(data => {
					//console.log(data);
					// 进一步处理数据
					const names = data.split(/\r?\n|\r/);
					names.forEach(text => {
						const button = document.createElement('button');
						button.textContent = text;
						// button.classList.add('custom-btn');
						// button.classList.add('btn-1');
						button.addEventListener('click', function() {
							// 在点击事件处理函数中获取按钮名称（这里就是按钮的文本内容）
							const buttonName = this.textContent;
							OnPlayM3U8Name(buttonName);
							//console.log(`点击了按钮：${buttonName}`);
						});
						m3u8ButtonContainer.appendChild(button);
					});
				})
				.catch(error => console.error(error));

			const mp4ButtonContainer = document.getElementById('mp4ButtonContainer');
			const mp4NamePath = "./video/mp4/name.txt"; //视频文件名称文件

			fetch(mp4NamePath)
				.then(response => response.text())
				.then(data => {
					//console.log(data);
					// 进一步处理数据
					const names = data.split(/\r?\n|\r/);
					names.forEach(text => {
						const button = document.createElement('button');
						button.textContent = text;
						// button.classList.add('custom-btn');
						// button.classList.add('btn-1');
						button.addEventListener('click', function() {
							// 在点击事件处理函数中获取按钮名称（这里就是按钮的文本内容）
							const buttonName = this.textContent;
							OnPlayMP4Name(buttonName);
							//console.log(`点击了按钮：${buttonName}`);
						});
						mp4ButtonContainer.appendChild(button);
					});
				})
				.catch(error => console.error(error));

			function OnPlay() {
				var url = document.getElementById('urlInput').value;
				OnPlayUrl(url);


			}
		</script>
	</body>
</html>